<

>

body { font-family: "arial", sans-serif; text-align: center; } #slider { position: relative; width: 1200px; margin: auto; display: flex; align-items: center; } #precedent, #suivant { cursor: pointer; transition: opacity 0.3s ease; opacity: 0; position: absolute; font-size: 100px; color: rgba(220, 220, 220, 0.8); background-color: rgba(0, 0, 0, 0.8); padding: 10px; } #precedent { left: 0; } #suivant { right: 0; } #slider:hover #precedent, #slider:hover #suivant { opacity: 1; }

const slide = ["", "paysage-montagne.jpg", "chemin-automne.jpg", "prairie-alpes.jpg"]; let numero = 0; function ChangeSlide(sens) { numero = numero + sens; if (numero < 0) numero = slide.length - 1; if (numero > slide.length - 1) numero = 0; document.getElementById("slide").src = slide[numero]; }

setInterval("ChangeSlide(1)", 4000);